<style>
    #febs-icon .icon-body {
        text-align: center;
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    #febs-icon .icon-body:hover, .icon-active {
        background: #f9fbff;
        color: #5a8bff;
    }

    #febs-icon .icon-body .layui-icon {
        font-size: 1.8rem;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-icon" lay-title="部门图标列表">
    <div class="layui-row layui-col-space8 febs-container">
        <div th:each="icon : ${icons}" class="layui-col-md2 layui-col-sm2 layui-col-xs4">
            <div class="layui-card" title="点击选中">
                <div  class="layui-card-body icon-body">
                    <input type="hidden" th:value="${icon.id}" class="icon-id">
                    <img th:id="'icon-'+${icon.id}"  width="50px" height="50px">
                    <p th:text="${icon.iconName}" class="layui-elip icon-name">图标别名</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="javascript">
    layui.use(['jquery', 'febs'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            icons = [[${icons}]],
            $view = $('#febs-icon'),
            $iconBody = $view.find('.icon-body');


        //所有图标回显
        $.each(icons,function (i, r) {
            $.ajax({
                type: "GET",
                url:'/icon/iconShow?id=' + r.id,
                data: {},
                success: function(result) {
                    //ajax调用成功后返回的是图片的base64数据
                    $('#icon-'+r.id).attr("src",result);
                }
            })
        })

        $iconBody.each(function () {
            var $this = $(this);
            $this.on('click', function () {
                $view.find('.icon-active').each(function () {
                    $(this).removeClass('icon-active');
                });
                $this.addClass('icon-active');
                var iconName = $this.find('.icon-name').text();
                febs.alert.success('已选择图标<strong> ' + iconName + ' </strong>');
            });
        });
    });
</script>